<template>
 <div class="login">
  <!-- 主体 -->
   <div class="login-content">
    <!-- 图片 -->
    <div class="image">
      <van-image
      round
      width="128px"
      height="128px"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    </div>
    <!-- 登录框 -->
    <div class="login-btn">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            type="username"
            name="username"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            :type="showPasswordType"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :right-icon="eyeIcon"
            @click-right-icon="handlePassword"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" color="#fff">
            <span class="login-sub">登录</span>
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 去注册 -->
     <div class="register">
      <router-link to="/register">还没有账号？去注册</router-link>
     </div>
   </div>
 </div>
</template>

<script>
import { showFailToast, showSuccessToast } from 'vant';
import { login } from '../../api/login'
export default {
 name: 'Login',
 data() {
  return {
   username: '',
   password: '',
   showPassword: false,
  }
 },
 computed: {
  eyeIcon(){
    return this.showPassword ? 'eye-o' : 'closed-eye'
  },
  showPasswordType(){
    return this.showPassword ? 'text' : 'password'
  }
 },
 methods: {
  // // 表单条件事件处理
  // async onSubmit({account, password}){
  //   //console.log(value)
  //   const {status, message, token} = await login(account, password)
  //   // console.log(message)
  //   if(status === 200){
  //     // showSuccessToast('登录成功')
  //     // 将token保存到本地
  //     sessionStorage.setItem('token', token)
  //     // 登录成功跳转首页
  //     this.$router.push('/')
  //   }else {
  //     showFailToast(message)
  //   }
  // },

  // 表单条件事件处理
  async onSubmit(value){
    //console.log(value)
    // 调用store中的异步登录action方法，实现登录，并将登录成功后的token保存到store的state
    const result = await this.$store.dispatch('user/asyncLogin', value)
    console.log('登录结果', result)
    if(result){
      // showSuccessToast('登录成功')

      // 将token保存到本地
      // sessionStorage.setItem('token', token)

      // 登录成功跳转首页
      // this.$router.push('/')

      this.$router.push(this.$route.query.redirect ?? '/mine')
    }else {
      showFailToast('用户名或密码错误!')
    }
  },
  // 切换密码显示
  handlePassword(){
    this.showPassword = !this.showPassword
  }
 }
}
</script>

<style lang="scss" scoped>
.login{
  width: 100%;
  height: 100%;
  background-color: rgba(217,83,65);
}
.login-content{
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #fff;
  .image{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px
  }
}
.login-sub{
  color: rgba(217,83,65);
}
.register{
  text-align: center;
}
</style>
